<template>
  <div class="container" ref="mapDiv">
    <div class="header">
      <div class="title">互联网企业楼宇网络统计大数据系统</div>
    </div>
    <div class="main">
      <div class="left-chart">
        <div class="top">
          <div class="chart-title">销售保障情况</div>
          <Category />
        </div>
        <div class="center">
          <div class="chart-title">销售保障情况</div>
          <Triangle />
        </div>
        <div class="bottom">
          <div class="chart-title">销售保障情况</div>
          <Dataplay class="datadisplay" />
        </div>
      </div>
      <!-- <div class="center-chart"></div> -->
      <div class="right-chart">
        <div class="top">
          <div class="chart-title">销售保障情况</div>
          <CirclePie />
        </div>
        <div class="center">
          <div class="chart-title">销售保障情况</div>
          <Line />
        </div>
        <div class="bottom">
          <div class="chart-title">销售保障情况</div>
          <Eventtable class="eventtable" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Category from "./echartsCom/Category.vue";
import Triangle from "./echartsCom/Triangle.vue";
import CirclePie from "./echartsCom/CirclePie.vue";
import Line from "./echartsCom/Line.vue";
import Dataplay from "./echartsCom/Datadisplay.vue";
import Eventtable from "./echartsCom/Eventtable.vue";
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

const screenRef = ref(null);
onMounted(() => {
  initMap();
});
// 初始化天地图
const mapDiv = ref(null);
var map = null;
let overlays = [];
const initMap = () => {
  // 初始化地图
  map = null;
  var T = window.T;
  map = new T.Map(mapDiv.value, {
    projection: "EPSG:4326",
  });
  // 设置显示地图的中心点和级别
  // 116.40969, 39.89945
  map.centerAndZoom(new T.LngLat(114.5120205423622, 38.04291764925318), 11);
  map.addEventListener("click", (event) => {
    handleMapClick(event);
  });
};

const handleMapClick = (event) => {
  // 清除之前的覆盖物
  clearOverlays();
  const lnglat = event.lnglat; // 获取点击处的经纬度

  var definedOverlay = T.Overlay.extend({
    initialize: function (lnglat) {
      this.lnglat = lnglat;
    },

    onAdd: function (map) {
      this.map = map;
      var div = (this._div = document.createElement("div"));
      div.style.position = "absolute";
      div.style.backgroundColor = "rgba(0,0,0,0.5)";
      div.style.border = "1px solid #BC3B3A";
      div.style.color = "white";
      div.style.height = "300px";
      div.style.width = "300px";
      let echartsInstance = echarts.init(div);
      echartsInstance.setOption({
        // ECharts 图表配置
        title: {
          show: true,
          text: "石家庄市未来一周天气变化",
          textStyle: {
            color: "#fff",
            fontSize: 16,
          },
          textAlign: "center",
          left: "50%",
          top: "10%",
          textVerticalAlign: "middle",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#DCECFF",
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
          splitLine: { show: false },
          axisLabel: {
            color: "#DCECFF",
          },
        },
        series: [
          {
            name: "Highest",
            type: "line",
            data: [19, 19, 15, 14, 20, 23, 17],
            symbolSize: 10,
            symbol: "circle",
            lineStyle: {
              color: "#FEFF84",
              width: 3,
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#FEFF84",
              borderWidth: 3,
            },
          },
          {
            name: "Lowest",
            type: "line",
            data: [10, 10, 11, 8, 11, 11, 4],
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              color: "#FFA184",
              width: 3,
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#FFA184",
              borderWidth: 3,
            },
          },
        ],
      });
      map.getPanes().overlayPane.appendChild(this._div);
      this.update(this.lnglat);
    },
    onRemove: function () {
      var parent = this._div.parentNode;
      if (parent) {
        parent.removeChild(this._div);
        this.map = null;
        this._div = null;
      }
    },
    /**
     * 更新位置
     */
    update: function () {
      var pos = map.lngLatToLayerPoint(this.lnglat);
      console.log(pos.y, pos.x);
      this._div.style.top = pos.y + "px";
      this._div.style.left = pos.x + "px";
    },
  });

  var point = new T.LngLat(lnglat.lng, lnglat.lat);
  var pdefinedOverlay = new definedOverlay(point);
  overlays.push(pdefinedOverlay);
  map.addOverLay(pdefinedOverlay);
};
// 清除所有的overlay
const clearOverlays = () => {
  overlays.forEach((overlay) => {
    map.removeOverLay(overlay);
  });
  overlays = []; // 清空覆盖物数组
};
onBeforeUnmount(() => {
  clearOverlays();
});
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  // background: #080e4e;
  .header {
    position: relative;
    z-index: 999;
    width: 100%;
    height: 71px;
    background: #00077f;
    box-shadow: 0px 0px 4px 0px #00004e;
    .title {
      width: 948px;
      height: 71px;
      margin: 0 auto;
      color: white;
      font-size: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .main {
    z-index: 999;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: calc(100% - 71px);
    position: relative;
    .left-chart,
    .right-chart {
      position: absolute;
      width: 490px;
      height: 100%;
      display: flex;
      flex-direction: column;
      & > div {
        flex: 1;
        width: 100%;
        // height: 301px;
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid #039ae4;
        position: relative;
        .chart-title {
          color: white;
          text-align: center;
          width: 198px;
          height: 38px;
          line-height: 38px;
          position: absolute;
          left: 0;
          top: 0;
          background-image: url("../assets/images/title.png");
        }
        .chart {
          width: 100%;
          height: 100%;
        }
      }
      .top {
        margin-top: 34px;
      }
      .center {
        margin-top: 19px;
      }
      .bottom {
        margin-top: 18px;
        margin-bottom: 26px;
        .datadisplay {
          width: 100%;
          height: 100%;
        }
        .eventtable {
          width: 100%;
          height: 100%;
        }
      }
    }
    .left-chart {
      left: 26px;
    }
    .right-chart {
      right: 26px;
    }
    .center-chart {
      flex: 1;
      height: 100%;
    }
    .right-chart {
      width: 490px;
      height: 100%;
    }
  }
}
</style>
